<template>
	<IForm :model="form" ref="form" :label-width="160" :rules="formRule" >
		<FormItem prop="smstpl_id" label="短信模版">
            <ISelect v-model="form.smstpl_id" label-in-value  @on-change="getSmsTpl">
                <OptionGroup v-for="config in smstpls" :value="config.id" :key="config.id" :label="config.name">
                    <IOption v-for="smstpl in config.child" :value="smstpl.id" :key="smstpl.id">
                    {{smstpl.content}}
                    </IOption>
                </OptionGroup>
            </ISelect>
			{{tpl}}
	    </FormItem>
	    <FormItem label="模版参数">
	    	<IButton type="dashed" @click="newParam">+模版参数</IButton>
	    </FormItem>
	    <FormItem v-for="(item,index) in form.params" :key="index">
	    	<Row>
	    		<ICol span="1">参数名:</ICol>
                <ICol span="8">
                	<FormItem :prop="'params.' + index + '.key'" :rules="{required: true, message: '参数名不能为空', trigger: 'blur'}">
                    	<IInput v-model="item.key" placeholder="请输入参数名"></IInput>
                	</FormItem>
                </ICol>
                <ICol span="1" offset="1">参数值:</ICol>
                <ICol span="8">
                	<FormItem :prop="'params.' + index + '.vue'" :rules="{required: true, message: '参数值不能为空', trigger: 'blur'}">
                    	<IInput v-model="item.vue" placeholder="请输入参数值"></IInput>
                	</FormItem>
                </ICol>
                <ICol span="1" offset="1">
                	<IButton @click="remove(index)">删除</IButton>
                </ICol>
            </Row>
	    </FormItem>
	    <FormItem label="手机号码" prop="phone">
	    	<IInput v-model="form.phone" placeholder="手机号码"></IInput>
	    </FormItem>
	    <FormItem>
            <IButton type="primary" @click="handleSubmit('form')" :loading="loading">发送</IButton>
        </FormItem>
	</IForm>
</template>
<script>
	import Form from 'iview/src/components/form';
	import { Select, Option, OptionGroup } from 'iview/src/components/select';
	import Button from 'iview/src/components/button';
	import {Row,Col} from 'iview/src/components/grid';
	import Input from 'iview/src/components/input';

	import Axios from 'admin/config/axios';

	export default{
		components:{
			'IForm' : Form,
			'FormItem' : Form.Item,
			'ISelect' : Select,
			'IOption' : Option,
			'IButton' : Button,
			Row,
            'ICol':Col,
            'IInput' : Input,
            OptionGroup
        },
        data () {
        	const validatePhone=(rule , value ,callback)=>{
        		if(!(/^(139|138|137|136|135|134|147|150|151|152|157|158|159|178|182|183|184|187|188|130|131|132|155|156|185|186|145|176|133|153|177|173|180|181|189|170|171)\d{8}$/.test(value))){
                    callback(new Error('请输入正确的手机号'));
                }
                callback();
	        };
            return {
            	loading : false,
                form :{
                	smstpl_id : 0,
                	params : [{key:'',vue : ''}],
                	phone : '',
                },
                smstpls : [],//模版短信列表
                tpl : '',//模版文本显示
                formRule : {
	                smstpl_id: [
	                    { required: true, message: '请选择一个模版', trigger: 'blur' , type: 'number' , min :1},
	                ],
	                phone :[
	                	{ required: true, message: '请填写手机号码', trigger: 'blur' },
	                	{ validator: validatePhone, trigger: 'blur'}
	                ]
	            },
            }
        },
        methods:{
        	formReset(){
        		this.$refs['form'].resetFields();
        	},
        	getSmsTpl(data){
        		this.tpl = data['label'];
        	},
        	newParam(){
        		this.form.params.push({key:'',vue : ''});
        	},
        	remove(index){
        		this.form.params.splice(index, 1);
        	},
        	handleSubmit (name) {
        		this.loading = true;
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                    	this.loading = false; return true;
                    }
                    Axios.Configs.SmsTpl.Send(this.form)
		            .then(res =>{
		            	this.loading = false;
		            	if(!res) return false;
		            })
                })
            },
        },
	}
</script>